<template>
  <div class="page page100">
    <div class="weui-form" v-show="!next">
      <div class="weui-form__text-area">
        <h2 class="weui-form__title">邀请加入团队</h2>
        <!-- <h2 class="weui-form__title">加入团队</h2> -->
        <!-- <div class="weui-form__desc">{{ team.name }}</div> -->
        <div class="weui-form__desc">{{ team.name }}:团队邀请你加入</div>
      </div>

      <div class="weui-form__control-area">
        <div class="weui-cells__group weui-cells__group_form">
          <div class="weui-cells weui-cells_form">
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd">
                <label class="weui-label">学校</label>
              </div>
              <div class="weui-cell__bd">
                <input
                  class="weui-input"
                  v-model="form.info.school"
                  placeholder="填写你的学校"
                />
              </div>
            </div>
          </div>
        </div>
        <div class="weui-cells__group weui-cells__group_form">
          <div class="weui-cells weui-cells_form">
            <div class="weui-cell weui-cell_active weui-cell_access" @click="showGradePicker = true">
              <div class="weui-cell__hd">
                <label class="weui-label">年级</label>
              </div>
              <div class="weui-cell__bd">
                <div class="weui-input" :class="{ 'placeholder-text': !form.info.grade }">
                  {{ form.info.grade || '请选择年级' }}
                </div>
              </div>
              <div class="weui-cell__ft">
                <i class="weui-icon-arrow"></i>
              </div>
            </div>
          </div>
        </div>
        <div class="weui-cells__group weui-cells__group_form">
          <div class="weui-cells weui-cells_form">
            <div class="weui-cell weui-cell_active weui-cell_access" @click="showClassPicker = true">
              <div class="weui-cell__hd">
                <label class="weui-label">班级</label>
              </div>
              <div class="weui-cell__bd">
                <div class="weui-input" :class="{ 'placeholder-text': !form.info.class }">
                  {{ form.info.class || '请选择班级' }}
                </div>
              </div>
              <div class="weui-cell__ft">
                <i class="weui-icon-arrow"></i>
              </div>
            </div>
          </div>
        </div>
        <div class="weui-cells__group weui-cells__group_form">
          <div class="weui-cells weui-cells_form">
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd">
                <label class="weui-label">姓名</label>
              </div>
              <div class="weui-cell__bd">
                <input
                  class="weui-input"
                  v-model="form.name"
                  placeholder="填写你在团队的姓名"
                />
              </div>
            </div>
          </div>
        </div>
        <div class="weui-cells__group weui-cells__group_form">
          <div class="weui-cell weui-cell_active">
            <div class="weui-cell__hd">
              <label class="weui-label">手机号</label>
            </div>
            <div class="weui-cell__bd">
              <input
                v-model.trim="form.phonenum"
                class="weui-input"
                type="number"
                placeholder=" 请输入手机号"
              />
            </div>
          </div>
          <div class="weui-cells__tips weui-cells__tips_warn" v-show="phone[1]">
            请输入正确手机号
          </div>
          <div class="weui-cell weui-cell_active weui-cell_vcode">
            <div class="weui-cell__hd">
              <label class="weui-label">验证码</label>
            </div>
            <div class="weui-cell__bd">
              <input
                v-model="form.yzm"
                class="weui-input"
                type="text"
                placeholder=" 输入验证码"
                maxlength="6"
              />
            </div>
            <div class="weui-cell__ft">
              <button
                class="weui-btn weui-btn_default weui-vcode-btn"
                :class="!disabled ? '' : 'weui-btn_disabled'"
                @click="sub"
                :disabled="!!disabled"
              >
                {{ disabled ? disabled : "获取验证码" }}
              </button>
            </div>
          </div>
        </div>
        <div class="weui-cells__group weui-cells__group_form">
          <div class="weui-cells weui-cells_form">
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd">
                <label class="weui-label">备注</label>
              </div>
              <div class="weui-cell__bd">
                <input
                  class="weui-input"
                  v-model="form.info.remark"
                  placeholder="填写备注信息（选填）"
                />
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="weui-cells__group weui-cells__group_form">
          <div class="weui-cells weui-cells_form">
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd">
                <label class="weui-label">密码</label>
              </div>
              <div class="weui-cell__bd">
                <input class="weui-input" placeholder="请输入密码" v-model="form.password" type="password" />
              </div>
            </div>
          </div>
        </div> -->
        <div class="password-tips">默认密码：000000</div>
      </div>
      <div class="weui-form__opr-area">
        <span class="weui-btn weui-btn_primary" @click="submit">确定</span>
      </div>
    </div>
    
    <!-- 年级选择器弹出层 -->
    <div class="weui-mask" v-show="showGradePicker" @click="showGradePicker = false"></div>
    <div class="weui-actionsheet weui-actionsheet_toggle" :class="{ 'weui-actionsheet_show': showGradePicker }">
      <div class="weui-actionsheet__title">
        <p class="weui-actionsheet__title-text">选择年级</p>
      </div>
      <div class="weui-actionsheet__menu">
        <div class="weui-actionsheet__cell" 
             v-for="grade in gradeOptions" 
             :key="grade" 
             @click="selectGrade(grade)">
          {{ grade }}
        </div>
      </div>
      <div class="weui-actionsheet__action">
        <div class="weui-actionsheet__cell" @click="showGradePicker = false">取消</div>
      </div>
    </div>
    
    <!-- 班级选择器弹出层 -->
    <div class="weui-mask" v-show="showClassPicker" @click="showClassPicker = false"></div>
    <div class="weui-actionsheet weui-actionsheet_toggle" :class="{ 'weui-actionsheet_show': showClassPicker }">
      <div class="weui-actionsheet__title">
        <p class="weui-actionsheet__title-text">选择班级</p>
      </div>
      <div class="weui-actionsheet__menu">
        <div class="weui-actionsheet__cell" 
             v-for="className in classOptions" 
             :key="className" 
             @click="selectClass(className)">
          {{ className }}
        </div>
      </div>
      <div class="weui-actionsheet__action">
        <div class="weui-actionsheet__cell" @click="showClassPicker = false">取消</div>
      </div>
    </div>
    
    <div v-show="next">
      <div class="weui-msg">
        <div class="weui-msg__icon-area">
          <i class="weui-icon-success weui-icon_msg"></i>
        </div>
        <div class="weui-msg__text-area">
          <h2 class="weui-msg__title">提交成功</h2>
          <p class="weui-msg__desc">
            已经加入
            <a href="javascript:">{{ team.name }}</a>
          </p>
          <!-- <div class="weui-msg__opr-area">
            <a
              :href="`/newh5.html?teamid=${team.ID}`"
              class="weui-btn weui-btn_primary"
              >查看团队文件</a
            >
          </div> -->
        </div>
      </div>
    </div>
    <div v-show="toast" @click="toast = false" style="opacity: 1">
      <div class="weui-mask_transparent"></div>
      <div class="weui-toast">
        <i class="weui-icon-success-no-circle weui-icon_toast"></i>
        <p class="weui-toast__content">{{ toast }}</p>
      </div>
    </div>
    <div v-show="toasterror" @click="toasterror = false" style="opacity: 1">
      <div class="weui-mask_transparent"></div>
      <div class="weui-toast">
        <i class="weui-icon-warn weui-icon_toast"></i>
        <p class="weui-toast__content">{{ toasterror }}</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import {
  asyncgetregistphoneVerificationCode,
  asyncgetteam,
  asyncuserregist,
} from "../api";
import Studycodemodel from "../mysql_interface/studycodemodel";
const query = new URLSearchParams(location.search.substring(1));
const teamid = query.get("teamid");
const teamusergroupid = query.get("teamusergroupid");
const catebagids = query.get("catebagids");
console.log("teamid:", teamid);
console.log("teamusergroupid:", teamusergroupid);
console.log("catebagids:", catebagids);
const form = reactive({
  teamid,
  name: "",
  username: "",
  phonenum: "",
  password: "000000",
  yzm: "",
  info: {
    school: "",
    grade: "",
    class: "",
    remark: "",
  },
  teamusergroupid:
    teamusergroupid === "undefined" ? undefined : teamusergroupid,
  catebagids,
});

onMounted(() => {
  getteam().catch(getteam);
});

const toast = ref<false | string>(false);
const phone = ref([false, false, false, false]);
const team = reactive<Studycodemodel.Iteam>({});
const disabled = ref(0);
const showGradePicker = ref(false);
const showClassPicker = ref(false);

// 年级选项数据
const gradeOptions = [
  '一年级', '二年级', '三年级', '四年级', '五年级', '六年级',
  '初一', '初二', '初三',
  '高一', '高二', '高三'
];

// 班级选项数据 (1-30班)
const classOptions = Array.from({ length: 30 }, (_, i) => `${i + 1}班`);

// 选择年级的方法
function selectGrade(grade: string) {
  form.info.grade = grade;
  showGradePicker.value = false;
}

// 选择班级的方法
function selectClass(className: string) {
  form.info.class = className;
  showClassPicker.value = false;
}
async function getteam() {
  if (teamid) {
    const data = await asyncgetteam({ ID: Number(teamid) });
    Object.assign(team, data);
  }
}
const next = ref(false);
let timer = 0;
function time() {
  disabled.value = 60;
  timer = window.setInterval(() => {
    disabled.value = disabled.value - 1;
    if (disabled.value === 0) {
      window.clearInterval(timer);
    }
  }, 1000);
}
async function sub() {
  if (form.phonenum) {
    await asyncgetregistphoneVerificationCode(form.phonenum);
    toast.value = "发送成功";
    time();
    phone.value[1] = false;
    setTimeout(() => {
      toast.value = false;
    }, 300);
  } else {
    phone.value[1] = true;
  }
}
const toasterror = ref<boolean | string>(false);
async function submit() {
  form.username = form.name;
  if (!form.username) {
    toasterror.value = "请填写姓名！";
    return;
  }
  if (!form.phonenum) {
    toasterror.value = "请填写手机号！";
    return;
  }
  if (!form.info.school) {
    toasterror.value = "请填写学校！";
    return;
  }
  if (!form.info.grade) {
    toasterror.value = "请填写年级！";
    return;
  }
  if (!form.info.class) {
    toasterror.value = "请填写班级！";
    return;
  }
  try {
    await asyncuserregist(form);
    next.value = true;
  } catch (e: any) {
    toasterror.value = e;
  }
}
</script>

<style>
body,
html {
  margin: 0;
  padding: 0;
}
</style>
<style scoped>
.page100 {
  height: 100vh;
}

.password-tips {
  text-align: center;
  color: #09bb07;
  font-size: 13px;
  margin: 15px 15px 5px 15px;
  padding: 10px 15px;
  /* background: rgba(9, 187, 7, 0.05); */
  border-radius: 8px;
  /* border: 1px solid rgba(9, 187, 7, 0.2); */
  position: relative;
  overflow: hidden;
}

.password-tips::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% {
    left: -100%;
  }

  100% {
    left: 100%;
  }
}

/* 年级选择器样式 */
.placeholder-text {
  color: #999;
}

.weui-icon-arrow {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 2px solid #c8c8cd;
  border-top: 2px solid #c8c8cd;
  transform: rotate(45deg);
}

/* 微信风格的底部弹出选择器 */
.weui-mask {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
}

.weui-actionsheet {
  position: fixed;
  left: 0;
  bottom: 0;
  transform: translate(0, 100%);
  -webkit-transform: translate(0, 100%);
  width: 100%;
  max-height: 50vh; /* 限制最大高度为屏幕的一半 */
  background-color: #efeff4;
  transition: transform 0.3s;
  -webkit-transition: -webkit-transform 0.3s;
  z-index: 5000;
  display: flex;
  flex-direction: column;
}

.weui-actionsheet_show {
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
}

.weui-actionsheet__title {
  position: relative;
  height: 50px; /* 减小标题高度 */
  padding: 0 20px;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  background: #fff;
  flex-shrink: 0; /* 标题不缩放 */
  border-bottom: 1px solid #e5e5e5;
}

.weui-actionsheet__title-text {
  font-size: 14px;
  color: #888;
  margin: 0;
}

.weui-actionsheet__menu {
  background-color: #fff;
  flex: 1; /* 占据剩余空间 */
  overflow-y: auto; /* 添加垂直滚动条 */
  max-height: calc(50vh - 50px - 60px); /* 减去标题和取消按钮的高度 */
}

.weui-actionsheet__cell {
  position: relative;
  padding: 15px 20px; /* 减小垂直内边距 */
  text-align: center;
  font-size: 16px; /* 稍微减小字体 */
  line-height: 1.4;
  color: #000;
  background-color: #fff;
  border-bottom: 1px solid #e5e5e5;
  cursor: pointer;
}

.weui-actionsheet__cell:active {
  background-color: #ececec;
}

.weui-actionsheet__action {
  margin-top: 6px;
  background-color: #fff;
  flex-shrink: 0; /* 取消按钮不缩放 */
  height: 60px; /* 固定取消按钮高度 */
}

.weui-actionsheet__action .weui-actionsheet__cell {
  border-bottom: none;
  color: #000;
  font-weight: bold;
  padding: 20px; /* 取消按钮保持较大的点击区域 */
}
</style>
